<template>
  <div>
    <el-card style="margin-bottom: 10px">
      <el-table :data="users">
        <el-table-column label="ID" prop="id" align="center"></el-table-column>
        <el-table-column label="头像" align="center">
          <template v-slot="scope">
            <el-upload
                :action="$baseUrl+'/file/upload'"
                :headers="{token:loginUser.token}"
                :show-file-list="false"
                :on-success="(row,file)=>handleAvatarSuccess(scope.row,file)"
                :before-upload="beforeAvatarUpload">

              <i v-if="!scope.row.avatar" class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-image v-if="scope.row.avatar" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"
                      style="width: 50px; height: 50px; border-radius: 50%;"></el-image>

          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="username" align="center"></el-table-column>
        <el-table-column label="姓名" prop="name" align="center"></el-table-column>
        <el-table-column label="地址" prop="address" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>文件上传下载</span>
      </div>
      <div>
        <el-upload
            accept="jpg"
            :action="$baseUrl+'/file/upload'"
            :headers="{token:loginUser.token}"
            list-type="picture"
            :before-upload="beforeUpload">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
        </el-upload>
      </div>
    </el-card>
  </div>
</template>

<script>
import {defineComponent} from 'vue'
import request from "@/utils/request";

export default defineComponent({
  name: "UserView",
  data() {
    return {
      users: [],
      loginUser: {},
    }
  },
  //vue实例创建后，还没渲染数据时，自动执行的操作
  created() {
  },
  //页面完成渲染后自动执行的操作
  mounted() {
    // axios.get('http://localhost:8080/comment/1/5').then(res => {
    //     // console.log(res)
    //     this.comments=res.data.data.records
    // })
    //获取用户列表
    this.getData()
    //获取当前登录用户
    this.loginUser = JSON.parse(localStorage.getItem("user") || '{}')
  },
  methods: {
    //获取列表数据
    getData() {
      request.get('/user/selectAll').then(res => {
        if (res.code === '200')
          this.users = res.data
        else
          this.$message.error(res.msg)
      })
    },
    //头像上传前检查
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //头像上传成功后操作
    handleAvatarSuccess(row, file) {
      row.avatar = file.response.data
      request.put('/user/update', row).then(res => {
        if (res.code === '200')
          this.$message.success("上传成功")
        else
          this.$message.error(res.msg)
      })
    },
    beforeUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //     this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return /*isJPG &&*/ isLt2M;
    },
    // handleFileUpload(response,file,fileList){
    //     console.log(fileList)
    //     // fileList.add({name:file.name,url:response.data.url})
    //     // this.fileList=fileList
    // },
  }
})
</script>

<style scoped>
</style>
